<template>
	<view>
		<m-container :status="onLine ? status : 6" :reloadFunc="reloadFunc">
			<view class="login-container">
				<view class="login-form">
					<text>登录</text>
					<view class="form">
						<view class="form-item">
							<text class="item-title">账号</text>
							<input type="text" placeholder="请输入账号" />
						</view>
						<view class="form-item">
							<text class="item-title">密码</text>
							<input type="password" placeholder="请输入密码" />
						</view>
						<button class="login">登录</button>
						<button class="login" type="default" open-type="getUserInfo" @getuserinfo="getUserInfo" @tap="quickLogin">微信一键登录</button>
					</view>
				</view>
			</view>
		</m-container>
	</view>
</template>

<script>
import { mapState } from 'vuex';
const utils = require('../../utils/utils'),
globalData = getApp().globalData
export default {
	data() {
		return {
			status: 2,
			loginForm: {
				username: '',
				password: ''
			}
		};
	},
	computed: {
		...mapState(['onLine'])
	},
	methods: {
		reloadFunc() {},
		getUserInfo() {
			uni.getUserInfo({
				success: async res => {
					await utils.storage.set('userInfo', res.userInfo);
					globalData.isLogin = true;
					uni.navigateBack({
						delta: 1
					});
				}
			});
		},
		quickLogin() {
			uni.login({
				success: res => {
					console.log(res);
				}
			});
		}
	}
};
</script>

<style lang="less" scoped>
/* miniprogram/pages/login/login.wxss */
.login-container {
	display: flex;
	justify-content: center;
	width: 100vw;
	height: 100vh;
	background: #f5f5f5;
}
.login-form {
	margin-top: 200rpx;
	display: flex;
	flex-direction: column;
	align-items: center;
}
.login-form > text {
	font-size: 40rpx;
	margin-bottom: 20rpx;
}
.form-item {
	display: flex;
	justify-content: flex-start;
	align-items: center;
	height: 80rpx;
}
.form-item .item-title {
	font-size: 28rpx;
	margin-right: 20rpx;
}
.form-item input {
	border-bottom: 1px solid #ccc;
}
.login {
	background: #ccc;
}
</style>
